<script setup lang="ts">
import { ref, watch } from 'vue';
import gsap from 'gsap';

const props = defineProps<{
  number: number;
}>();

const animatedNumber = ref(0);

watch(() => props.number, (newVal) => {
  gsap.to(animatedNumber, {
    duration: 0.5, // 动画持续时间
    ease: 'power1.inOut', // 动画缓动效果
    value: newVal, // 目标值
    roundProps: ["value"]
  });
},{
  immediate: true,
  deep: true
});
</script>

<template>
  <span class="number">{{ animatedNumber?.toFixed(0) }}</span>
</template>

<style scoped lang="scss">

</style>
